<template>
    <div>
        <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="phoneNumber" name="phoneNumber" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
                <div class="yzm">
                    <van-field v-model="Verification" name="Verification" label="验证码" placeholder="验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]" />
                    <van-button square type="primary" class="yzm-btn" @click="fs">发送验证码</van-button>
                </div>
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" ref="divRef">
                    提交
                </van-button>
            </div>
        </van-form>
        <div class="jump">
            已有账号? <span @click="jump">去登录</span>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref , onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant';

import { SendVerification, IsRegistration  , yzmYz ,register} from '../api/login'
const router = useRouter()
const onClickLeft = () => history.back();

let phoneNumber = ref('')
let Verification = ref<number | string>('')
let password = ref('')
let jump = () => {
    router.push({ name: 'user' })
}
const divRef = ref(null)
onMounted(()=>{
    console.log(divRef.value);
    
})

// 发送验证码
let fs = async () => {
    let ress = await IsRegistration(phoneNumber.value)
    if (ress.code != '200') {
        showDialog({
            title: '标题',
            message: '账号已经被注册',
        })
        return
    }
    // 获取验证码
    let res = await SendVerification(phoneNumber.value)
    // console.log(res);
    // 将验证码填入
    Verification.value = res.data
}
// 提交表单
const onSubmit = async () => {
    // 验证验证码
    let req = await yzmYz(phoneNumber.value ,Verification.value)
    if(req.code != '200'){
        showDialog({
            title: '标题',
            message: '验证码输入有误',
        })
        return
    }

    let res = await register(phoneNumber.value , password.value)
    if(res.code == '200'){
        let dl = await showDialog({
            title: '标题',
            message: '注册成功去登录',
        })
        router.push({name:'user'})
    }
    
};
</script>
<style scoped>
.yzm {
    display: flex;
    align-items: center
}

.yzm-btn {
    font-size: 10px;
    padding: unset;
    /* width: 40px; */
    width: 100px;
    height: 40px;
}

.jump {
    text-align: right;
    font-size: 12px;
    padding-right: 20px;
}

.jump>span {
    color: red;
}
</style>